<template>
  <div>
    <p>
      click {{ count }} times, count is
      {{ oddOrEven }}
    </p>
    <button @click="INCREMENT(1)">+</button>
    <button @click="DECREMENT(1)">-</button>
    <button @click="incrementIfOdd(1)">increment if odd</button>
    <button @click="incrementAsync(1)">increment async</button>
  </div>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapActions,
  mapMutations,
  // mapActions, mapMutations
} from "vuex";
/*
  映射到计算属性中：
    mapState 
      将vuex的state数据映射到组件内
      将来可以通过this直接操作数据
    mapGetters
      将vuex的getters数据映射到组件内
      将来可以通过this直接操作数据

  映射到methods中：
    mapActions
      将vuex的actions映射到组件内
      将来可以通过this直接调用actions
    mapMutations
      将vuex的mutations映射到组件内
      将来可以通过this直接调用mutations
*/

export default {
  name: "App",
  // mounted() {
  //   console.log(this);
  // },
  methods: {
    ...mapActions(["incrementIfOdd", "incrementAsync"]),
    ...mapMutations(["INCREMENT", "DECREMENT"]),
    // increment() {
    //   // 触发action函数
    //   // 传递参数只能有一个
    //   this.$store.commit("INCREMENT", 1);
    // },
    // decrement() {
    //   // 触发action函数
    //   this.$store.commit("DECREMENT", 1);
    // },
    // incrementIfOdd() {
    //   this.$store.dispatch("incrementIfOdd", 1);
    // },
    // incrementAsync() {
    //   this.$store.dispatch("incrementAsync", 1);
    // },
  },
  computed: {
    /*
      mapState 是一个函数
      mapState() 返回值是一个对象
      {
        count: function() {
          return this.$store.state.count
        }
      }
      {
        oddOrEven: function() {
          return this.$store.getters.oddOrEven
        }
      }
    */
    ...mapState(["count"]),
    ...mapGetters(["oddOrEven"]),
  },
};
</script>

<style>
</style>